<template>
	<view class="home">
		<!-- 宫格菜单 -->
		<view class="flex-row justify-center">
			<view class="card menu bg-white">
				<u-grid :col="5" :border="false">
					<u-grid-item v-for="(i,k) in nav" :key="i.id" @click="cgNav(k, i)">
						<image class="icon" :src="i.icon" style="width: 64rpx;height: 64rpx;" mode="widthFix"></image>
						<view class="grid-text margin-top-sm">{{i.cate_name}}</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>

		<view class="flex-row justify-center">
			<view class="card list" :style="{ height: show?'340rpx':'0' }">
				<view class="arrow" :class="{ show: show }" :style="{ left: `${active*20+10}%` }"></view>
				<swiper class="swiper gold-dot" indicator-dots style="height: 96%;" v-for="(i,ik) in nav2" :key="ik" v-show="active==ik">
					<swiper-item v-for="(j,jk) in i" :key="jk">
						<u-grid :col="5" :border="false">
							<u-grid-item v-for="k in j" :key="k.id" class="item" @click="goto(k)">
								<u-avatar :src="k.icon" mode="square" :size="60"></u-avatar>
								<view class="grid-text">{{k.cate_name}}</view>
							</u-grid-item>
						</u-grid>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				active: 0,
				show: false,
				nav: []
			};
		},
		watch: {
			value(val, old) {
				if (val > old) {
					this.show = false
				}
			}
		},
		computed: {
			nav2() {
				let nav = this.nav
				let newnav = []
				for (let i = 0; i < nav.length; i++) {
					newnav[i] = []
					let arr = nav[i].second
					let page = Math.ceil(arr.length / 10)
					for (let j = 0; j < page; j++) {
						newnav[i][j] = arr.slice(10 * j, 10 * j + 10)
					}
				}
				return newnav
			}
		},
		mounted() {
			this.getNav();
		},
		methods: {
			getNav() {
				this.$u.get('/category/list').then(res => {
					let nav = res.data.result.category
					this.nav = nav
				})
			},
			cgNav(k, item) {
				if (item.agent) {
					this.$goto('/pages/other/search?cate='+item.id+'&agent=1')
					this.show = false
				} else if (this.active == k) {
					this.show = !this.show
				} else {
					this.show = true
					this.active = k
				}
			},
			goto(item) {
				if (item.cate_type) {
					this.$goto(item.cate_type.url+'?type='+item.cate_type.type)
				} else {
					this.$goto('/pages/other/search?cate='+item.id)
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FEFEFE;
	}
	.home {
		position: relative;
	}

	.card {
		width: 670rpx;
		box-shadow: 0rpx 4rpx 40rpx 0rpx rgba(0, 0, 0, 0.1);
		position: relative;
		z-index: 9;

		&.menu {
			transform: translateY(-50%);
			overflow: hidden;
			border-radius: 16rpx;
			height: 164rpx;
		}

		&.list {
			margin-top: -40rpx;
			background: #fff;
			border-radius: 16rpx;
			transition: all 0.3s;
			position: absolute;
			
			.swiper {
				position: relative;
				z-index: 3;
				background: #fff;
			}
		}

		.arrow {
			width: 40rpx;
			height: 40rpx;
			background: #fff;
			box-shadow: 0rpx 4rpx 40rpx 0rpx rgba(0, 0, 0, 0.1);
			position: absolute;
			top: 0;
			transform: translateY(-50%) translateX(-50%) rotate(45deg);
			opacity: 0;
			z-index: 0;
			transition: all 0.3s;

			&.show {
				opacity: 1;
			}
		}

		.u-grid {
			border-radius: 16rpx;
			overflow: hidden;
		}

		.grid-text {
			font-size: 24rpx;
			margin-top: 8rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			line-height: 30rpx;
		}

		.u-grid-item-box {
			padding: 10rpx 0;
		}
	}
</style>